根據夥伴許博士的三個網頁截圖,我自己用Antigravity做出響應式 Web 網站系統 (Responsive Web Application) 規格與設計。
#採用現代化 1200px 寬螢幕 Web Dashboard Layout。
頂部設置全寬網頁導覽列 (Header Bar) 與頁籤切換按鈕(履歷追溯、藥劑決策查詢、市售殘留統計)。
#多欄自適應網頁排版
履歷追溯頁面:左側為批次與採收倒數 Hero 卡片,右側為時序記錄區塊(Desktop 雙欄並排)。
藥劑決策查詢頁面:左側為過濾條件面板(包含剩餘採收天數連動),右側為完整寬度的網頁數據表格。
市售殘留統計頁面:上方為膠囊母體切換,中段為 4 大指標 Metric Cards 與動態分母對照表。
Web 網站技術架構 (Web System Architecture)[ 前端 Web 瀏覽器 (Desktop & Mobile Web) ]
│ (HTML5 + Vanilla CSS / Tailwind + Modern ES6 JS)
│
├── 1. 產銷履歷與採收安全期追溯儀表板 (Traceability Dashboard)
├── 2. 藥劑決策查詢網頁與篩選矩陣 (Pesticide Query Web Matrix)
└── 3. 市售殘留統計與風險圖表 (TFDA Sampling Web Analytics)
│
▼
[ REST API / Backend Web Services (Node.js/Express or Python/FastAPI) ]
│
├── 安全採收期判定與倒數邏輯 (PHI Engine)
├── IRAC/FRAC 作用機制輪用邏輯
└── Open Data 每日/定期自動同步服務
│
▼
[ 資料庫與數據源 (PostgreSQL + PostGIS) ]
├── 農業部防檢署:農藥登記與用藥法規資料庫 Open Data
├── 食藥署 (TFDA):市售農產品殘留抽驗 Open Data
└── 產銷履歷 (TAP) / 智慧農場噴藥管理紀錄

